@import '~antd/es/style/themes/default.less';
@pro-header-hover-bg: rgba(0, 0, 0, .025);

.logo {
	display: inline-block;
	padding: 0 0 0 24px;
	height: @layout-header-height;
	cursor: pointer;
	line-height: @layout-header-height;
	vertical-align: top;
	font-size: 20px;

	img {
		display: inline-block;
		vertical-align: middle;
	}
}

.menu {
	:global(.anticon) {
		margin-right: 8px;
	}

	:global(.ant-dropdown-menu-item) {
		min-width: 160px;
	}
}

.trigger {
	padding: ~'calc((@{layout-header-height} - 20px) / 2)'24px;
	height: @layout-header-height;
	cursor: pointer;
	font-size: 20px;
	transition: all .3s, padding 0s;

	&:hover {
		background: @pro-header-hover-bg;
	}
}

.right {
	// overflow: hidden;
	display: flex;
	float: right;
	margin-right: 8px;
	width: 92%;
	height: 100%;

	.tabList {
		display: flex;
		align-items: center;
		flex: 1;
		margin-right: 8px;

		.tabBox {
			display: flex;
			align-items: center;
			margin-right: 8px;
			padding: 0 8px;
			border-radius: 2px;
			width: 112px;
			height: 70%;

			.title {
				overflow: hidden;
				margin-right: 6px;
				width: 100%;
				cursor: pointer;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.close {
				cursor: pointer;
				font-size: 12px;

				&:hover {
					border-radius: 50px;
					background: #8b787873;
				}
			}
		}

		.moreBox {
			position: relative;

			.moreChar {
				margin-left: 8px;
				width: 20px;
				cursor: pointer;
			}

			.moreList {
				position: absolute;
				left: -8px;

				.item {
					margin-bottom: 2px;
				}
			}
		}
	}
}

.dark {
	height: @layout-header-height;

	.action {
		color: rgba(255, 255, 255, .85);

		> i {
			color: rgba(255, 255, 255, .85);
		}

		&:hover,
		&:global(.opened) {
			background: @primary-color;
		}

		:global(.ant-badge) {
			color: rgba(255, 255, 255, .85);
		}
	}
}

.logout {
	margin-left: 12px;
	cursor: pointer;
}

@media only screen and (max-width: @screen-md) {
	:global(.ant-divider-vertical) {
		vertical-align: unset;
	}

	.name {
		display: none;
	}

	i.trigger {
		padding: 22px 12px;
	}

	.logo {
		position: relative;
		padding-left: 12px;
		padding-right: 12px;
	}

	.right {
		position: absolute;
		right: 12px;
		top: 0;
		width: 70%;
		background: #fff;

		.account {
			.avatar {
				margin-right: 0;
			}
		}
	}
}
